<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.con{
				width: 500px;
				height: 400px;
			}
			.menu{
				width: 450px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}
			.menu li{
				padding: 5px;
				background: skyblue;
			}
			.one{
				width: 450px;
				height: 367px;
				margin: 0 0 0 25px;
				border: 1px solid black;
				text-align: center;
				line-height: 367px;
				background: skyblue;
				position: absolute;
				top: 31px;
				display: none;
			}	
			.two{
				width: 450px;
				height: 367px;
				margin: 0 auto;
				border: 1px solid black;
				text-align: center;
				line-height: 367px;
				background: pink;
				position: absolute;
				top: 32px;
				left: 25px;
				display: none;
			}	
			.three{
				width: 450px;
				height: 367px;
				margin: 0 auto;
				border: 1px solid black;
				text-align: center;
				line-height: 367px;
				background: #87CEEB;
				position: absolute;
				top:32px;
				left: 25px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="con">
			<ul class="menu">
				<li>菜单一</li>
				<li>菜单二</li>
				<li>菜单三</li>
			</ul>
			<div class="one">内容一</div>
			<div class="two">内容二</div>
			<div class="three">内容三</div>
		</div>
		<script type="text/javascript">
			
		</script>
	</body>
</html>
